<template>
  <nav>
    <ul class="navbar">
      <li v-for="item in navItems" :key="item.id">
        <router-link
            :to="item.path"
            :class="{ 'active-link': isActivePath(item.path) }"
        >
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  name: 'HomeNavbar',
  setup() {
    const route = useRoute();

    const navItems = [
      { id: "1", name: '首页', path: '/home' },
      { id: "2", name: '社会专区', path: '/social-zone' },
      { id: "3", name: '校园专区', path: '/school-zone' },
    ];

    const isActivePath = (path) => {
      return route.path === path;
    };

    return {
      navItems,
      isActivePath
    };
  }
}
</script>

<style scoped>
.navbar {
  list-style-type: none;
  display: flex; /* 使用 flexbox 横向排列 */
  justify-content: space-around; /* 均匀分布 */
  width: 100%;
  height: 6.48vh;
  margin: 0;
  padding: 0;
}
.navbar li {
  width: 25%;
  height: 6.48vh;
  line-height: 6.48vh;
  font-size: 0.9375vw;
  flex: 1; /* 使每个导航项平分空间 */
  text-align: center; /* 中心对齐 */
}
.navbar li:hover {
  background-color: rgba(16, 112, 222, 1); /* 鼠标悬停时的背景颜色 */
}
.navbar a {
  text-decoration: none; /* 去掉下划线 */
  color: rgba(255, 255, 255, 1); /* 链接颜色 */
  display: block; /* 使链接占满整个列表项 */
}
.active-link {
  background-color: rgba(0, 95, 204, 1); /* 当前页面导航的背景颜色 */
  font-weight: 700;
}
</style>
